let form = layui.form;
let layer = layui.layer;

// 编辑文章

// 获取浏览器地址中的属性值
let essay_id = new URLSearchParams(location.search).get('id');


$.ajax({
    url: '/my/category/list',
    success: function (res) {
        let arr = [];
        res.data.forEach(item => {
            arr.push(`<option value="${item.id}">${item.name}</option>`)
        });
        $('.categoryKind').append(arr.join(''));
        // 使用动态创建元素的 input 表单要更新渲染 type="select/ checkbox/ radio"
        form.render();
        // 获取指定文章 进行数据回填
        $.ajax({
            url: '/my/article/' + essay_id,
            success: function (res) {
                // console.log(res);
                layer.msg(res.message);
                if (res.status === 0) {
                    form.val('editEssayForm', res.data);
                    // 渲染文本框
                    initEditor();
                    $image.cropper('destroy').attr('src', ' http://www.itcbc.com:8080/' + res.data.cover_img).cropper(options);
                }
            }
        })

    }
})

// 取消修改文章注册事件
$('.cancel').on('click', function (e) {
    e.preventDefault();
    layer.confirm('确定要取消修改？', function (index) {
        // 如果确定执行
        location.href = './articleList.html';
        layer.close(index);
    })
})

// 1. 初始化剪裁框
let $image = $('#image')
// 2. 设置项
let options = {
    aspectRatio: 16 / 9,
    // 让剪裁框铺满整个剪裁区
    autoCropArea: 1,
    preview: '.img-preview'
}

$image.cropper(options);

$('button:contains("选择封面")').click(function () {
    $('#file').trigger('click');
});

$('#file').change(function () {
    let fileObj = this.files[0];
    let url = URL.createObjectURL(fileObj);
    $image.cropper('destroy').attr('src', url).cropper(options);
});

// --------------------------------------表单提交    二进制大对象------------------
$('.layui-form').on('submit', function (e) {
    e.preventDefault();
    let data = new FormData(this);
    // 获取tinyMCE插件的文本域内容
    data.set('content', tinyMCE.activeEditor.getContent());

    let canvas = $image.cropper('getCroppedCanvas', { width: 400, height: (400 * 9 / 16) });
    // 把canvas图片转成二进制形式
    canvas.toBlob(function (blob) {
        // 追加文件对象到fd中
        data.append('cover_img', blob);

        // 异步原因，在获取图片文件后再进行Ajax提交

        $.ajax({
            type: 'POST',
            url: '/my/article/add',
            data: data,
            // 不要处理数据；意思是不要把对象形式的fd转换成查询字符串形式
            processData: false,
            // 不要加默认的请求头（application/x-www-form-urlencoded），让浏览器自行设置请求头
            contentType: false,
            success: function (res) {

                if (res.status === 0) {
                    layer.msg(res.message, { time: 2000 }, function () {
                        location.href = '../article/list.html';
                    });
                }
            },
            error: function (xhr) {
                let res = xhr.responseJSON;
                layer.msg(res.message);
            }
        })
    });


})

